<template>
    <div style="min-width:809px">
        <!-- <div class="vs-search-box">
            <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                <el-form-item label="门店：">
                    <el-select v-model="paging.store_id" style="width:250px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" class="vs-right-btns">
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </div> -->
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <div class="title-left"> 
                    增值服务
                </div>
                <el-button style="margin-left:auto;" @click="add" type="primary">新增</el-button>
            </div>
            <el-table :data="tableData" :header-cell-style="{background:'#f5f6f8'}"  v-loading="loading" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column prop="title" label="名称" min-width="70"> </el-table-column>
                <el-table-column prop="desc" label="简介" min-width="70"> </el-table-column>
                <!-- <el-table-column prop="money" label="价格" min-width="70"> </el-table-column> -->
                <el-table-column prop="month_money" label="月度价格" min-width="70"> </el-table-column> 
                <el-table-column prop="quarter_money" label="季度价格" min-width="70"> </el-table-column> 
                <el-table-column prop="year_money" label="年度价格" min-width="70"> </el-table-column> 
                <el-table-column prop="is_base" label="是否基础默认菜单" min-width="70">
                    <template slot-scope="scope">
                        {{scope.row.is_base == 1 ? '是' : '否'}}
                    </template>
                </el-table-column>
                
                <el-table-column fixed="right" width="109" label="操作"> 
                    <template slot-scope="scope">
                        <span class="tab-table-text" @click="setRow(1,scope.row)">编辑</span>
                        <span class="tab-table-text red" @click="setRow(2,scope.row)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                style="
                    margin-top: 40px;
                    text-align: center;
                    padding-bottom: 20px;
                "
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paging.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="paging.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paging.total"
            >
            </el-pagination>
        </div>
        
        <el-dialog
            :title="`${ruleForm.id?'修改':'新增'}增值服务`"
            :visible.sync="dialogVisible"
            width="800px"
            
            :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm" >
                <el-form-item label="名称：" prop="title" class="ruleFormInput">
                    <el-input  type="text" v-model="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="简介：" prop="desc" class="ruleFormInput">
                    <el-input  type="text" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <!-- <el-form-item label="是否是基础默认菜单：" prop="is_base" class="ruleFormInput">
                    <el-radio-group v-model="ruleForm.is_base" @change="radioFun">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <el-table-column prop="expire" label="过期时间（天）" min-width="70">
                    <template slot-scope="scope">
                        {{scope.row.expire}}
                    </template>
                </el-table-column>
                <!-- <el-form-item label="价格：" prop="money" class="ruleFormInput">
                    <el-input  type="number" v-model="ruleForm.money"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="过期时间（天）" v-if="ruleForm.is_base == 0" style="width:100%" prop="expire">
                    <el-input-number v-model="ruleForm.expire" :min="1" :max="9999" />
                </el-form-item> -->
                <el-form-item label="菜单：" prop="menu_ids" class="ruleFormInput">
                    <!-- collapse-tags -->
                    <el-cascader
                        v-model="ruleForm.menu_ids"
                        :options="menuList"
                        :props="props"
                        clearable
                        ref="cascader"
                        @change="handleChange"
                        placeholder="请选择"></el-cascader>
                </el-form-item>
                <el-form-item label="月度价格：" prop="month_money" class="ruleFormInput">
                    <el-input  type="number" v-model="ruleForm.month_money"></el-input>
                </el-form-item>
                <el-form-item label="季度价格：" prop="quarter_money" class="ruleFormInput">
                    <el-input  type="number" v-model="ruleForm.quarter_money"></el-input>
                </el-form-item>
                <el-form-item label="年度价格：" prop="year_money" class="ruleFormInput">
                    <el-input  type="number" v-model="ruleForm.year_money"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false;handleClose()">取 消</el-button>
                <el-button type="primary" :loading="isBtn" @click="setAd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isActive:true,
            props: { multiple: true, emitPath: false, value: 'id', label: 'title', children: 'child' },
            paging:{
                type:'',
                store_id:'',
                store_cate_id: '',
                page:1,
                total:0,
                limit:10,
            },
            ruleForm: {
                title: '',
                desc: '',
                is_base: 0,
                // money: '',
                menu_ids: '',
                // expire: ''
            },
            shopList:[],
            rules:{
                menu_ids:{ required: true, message: '请选择菜单', trigger: 'change' },
                title:{ required: true, message: '请输入标题', trigger: 'blur' },
                desc:{ required: true, message: '请输入简介', trigger: 'blur' },
                money:{ required: true, message: '请输入价格', trigger: 'blur' },
                expire:{ required: true, message: '请输入过期时间', trigger: 'blur' },
            },
            dialogVisible:false,
            isBtn:false,
            loading:false,
            tableData: [],
            menuList: []
        };
    },
    created() {
        console.log(123, this.$route.query.id)
        this.rowId = this.$route.query.id

        this.homegetStore();
        this.handleCurrentChange(1);
        this.getMenu();
    },
    methods: {
        handleChange(value) {
            console.log(1111, value);
            const checkedNodes = this.$refs.cascader.getCheckedNodes();
            const allIds = new Set();
            console.log(556, checkedNodes)
            checkedNodes.forEach(node => {
                allIds.add(node.value)
                // 添加当前节点路径上的所有ID
                node.children.forEach(item => allIds.add(item.value));
            });
            
            // this.allSelectedIds = Array.from(allIds);
            this.ruleForm.menu_ids = Array.from(allIds)
            console.log('所有选中的ID（包含父级）:', this.ruleForm.menu_ids);
        },
        async getMenu(){
            let {code,data} = await this.$Http.getMenu({ store_cate_id: this.$route.query.id });
            if(code){
                data.forEach(item => {
                    if (item.child.length < 1) item.child = null
                    item.child && item.child.forEach(row => {
                        if (row.child.length < 1) row.child = null
                    })
                })
                this.menuList = data;
                console.log(66, this.menuList)
            }
        },
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
        add(){
            this.dialogVisible = true;
        },
        reset(){//重置
            this.paging = this.$options.data().paging;
            // this.paging.store_id = this.shopList[0].id;
            this.handleCurrentChange(1)
        },
        verify(hasFmt,sta){
            if(sta){
                this.$refs[hasFmt].validate();
            }else this.$refs[hasFmt].clearValidate();
        },
        setRow(type,row){
            if(type==1){
                this.dialogVisible = true;
                this.ruleForm = JSON.parse(JSON.stringify(row))
                if (row.menu_ids) {
                    this.ruleForm.menu_ids = this.ruleForm.menu_ids.split(",")
                }
                console.log(343, this.ruleForm)
            }else{
                this.$msgbox({
                    title: '提示',
                    message: '确定要删除该条数据吗?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        let {code,data} = await this.$Http.delPackage({id:row.id})
                            if(code){
                                this.$message.success('删除成功!');
                                this.handleCurrentChange(1)
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    }
                }).then(action => {

                }).catch(()=>{});
            }
        },
        setAd(){
            this.$refs['ruleForm'].validate(async valid => {
                if(!valid)return;
                this.isBtn = true;

                if (this.ruleForm.is_base == 1) this.ruleForm.expire = ''

                let pls = JSON.parse(JSON.stringify(this.ruleForm))
                pls.menu_ids = pls.menu_ids.join()
                pls.store_cate_id = this.rowId
                
                let obj = Object.assign({},pls);
                let {code,data} = await this.$Http.setPackage(obj);
                this.isBtn = false;
                if(code){
                    this.$message.success((this.ruleForm.id?'修改':'添加')+"成功!");
                    this.dialogVisible = false;
                    this.handleClose()
                    this.handleCurrentChange(1)
                }
            })
        },
        handleClose(dom){
            dom&&dom();
            this.ruleForm = this.$options.data().ruleForm;
            this.$refs['ruleForm'].resetFields();
        },
        async getDataList(){
            this.loading = true;
            this.paging.store_cate_id = this.rowId
           
            let {code,data} = await this.$Http.getPackage(this.paging)
            this.loading = false;
            if(code){
                this.tableData = data.data;
                this.paging.total = data.total
            }
        },
        handleSizeChange(val){
             this.paging.limit = val;
            this.getDataList()
        },
        handleCurrentChange(val){
            this.paging.page = val;
            this.getDataList()
        },
    },
};
</script>

<style lang="scss" scoped>
.demo-ruleForm{
    max-height: 800px;
    overflow-y: scroll;
}
.image-thumbnail{
    max-width: 200px;
    max-height: 140px;
}
video{
    max-width: 300px;
    max-height: 180px;
    width: 100%;
    object-fit: cover;
}
.red{
    color: #f00;
}
.ruleFormInput{
    ::v-deep{
        .el-input{
             width: 300px;
        }
        
    }
}
::v-deep .el-select-dropdown{
            width: 300px !important;
        }
</style>

